<!DOCTYPE html>
<html lang="zh-CN">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="beans.Employee" %>
<%@ page import="service.EmployeeService" %>
<%
    // 从会话中获取用户信息（使用您现有的登录系统）
    Employee employee = (Employee) session.getAttribute("user");
    String role = (String) session.getAttribute("role");
    String username = (String) session.getAttribute("username");

    // 如果没有登录，重定向到登录页面
    if (employee == null || username == null) {
        response.sendRedirect("login.jsp");
        return;
    }

    // 如果需要刷新员工信息，从数据库重新获取
    String refresh = request.getParameter("refresh");
    if ("true".equals(refresh)) {
        EmployeeService employeeService = new EmployeeService();
        Employee refreshedEmployee = employeeService.getEmployeeByID(employee.getEmployeeID());
        if (refreshedEmployee != null) {
            employee = refreshedEmployee;
            session.setAttribute("user", employee); // 更新session中的用户信息
        }
    }

    // 获取消息参数，用于显示操作结果
    String message = request.getParameter("message");
%>
<head>
    <meta charset="UTF-8">
    <title>公司用车管理系统（用车员工）</title>
    <style>
        /* 保留原有样式 */
        body {
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei", Arial, sans-serif;
            background: #f6f6f6;
        }

        .header {
            background: #183a8a;
            color: #fff;
            font-size: 2rem;
            font-weight: bold;
            padding: 10px 0 10px 10px;
            letter-spacing: 2px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .header-right {
            display: flex;
            align-items: center;
            margin-right: 30px;
            font-size: 1rem;
        }

        .user-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #fff;
            color: #183a8a;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin-right: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .user-info {
            margin-right: 20px;
            color: #fff;
        }

        .bell-icon {
            font-size: 1.3rem;
            margin-right: 20px;
            color: #fff;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .bell-icon:hover {
            transform: scale(1.1);
        }

        .logout {
            color: #fff;
            text-decoration: none;
            margin-left: 10px;
            font-size: 1rem;
            transition: color 0.2s;
        }

        .logout:hover {
            color: #a8c5ff;
        }

        .container {
            display: flex;
            height: calc(100vh - 56px);
        }

        .sidebar {
            width: 220px;
            background: #183a8a;
            display: flex;
            flex-direction: column;
            padding-top: 10px;
            box-shadow: 2px 0 8px rgba(24, 58, 138, 0.05);
        }

        .menu-item {
            color: #fff;
            padding: 18px 0 18px 32px;
            font-size: 1.15rem;
            cursor: pointer;
            border-left: 5px solid transparent;
            transition: background 0.2s, border 0.2s, transform 0.2s;
            text-decoration: none;
            display: block;
        }

        .menu-item.active,
        .menu-item:hover {
            background: #2450a7;
            border-left: 5px solid #fff;
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(24, 58, 138, 0.10);
            transform: translateX(2px);
        }

        .main-content {
            flex: 1;
            background: #f6f6f6;
            padding: 30px;
            overflow-y: auto;
        }

        .form-card {
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            padding: 30px;
            max-width: 900px;
            margin: 0 auto;
        }

        .form-title {
            font-size: 1.8rem;
            font-weight: bold;
            color: #183a8a;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            font-weight: 500;
            margin-bottom: 8px;
            color: #333;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 1rem;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #2450a7;
            box-shadow: 0 0 0 3px rgba(36, 80, 167, 0.15);
        }

        .form-group.readonly input {
            background-color: #f8f8f8;
            cursor: not-allowed;
        }

        /* 错误提示样式 */
        .form-group.error input,
        .form-group.error select,
        .form-group.error textarea {
            border-color: #ff4d4f;
            box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.1);
        }

        .form-group .error-message {
            color: #ff4d4f;
            font-size: 0.9rem;
            margin-top: 5px;
            display: none;
        }

        .form-group.error .error-message {
            display: block;
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 30px;
        }

        #anniu {
            background: #2450a7;
            color: #fff;
            font-size: 1.15rem;
            cursor: pointer;
            border: none;
            border-radius: 6px;
            padding: 12px 30px;
            transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
            text-decoration: none;
            box-shadow: 0 4px 12px rgba(36, 80, 167, 0.2);
        }

        #anniu:hover {
            background: #1a4080;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(36, 80, 167, 0.3);
        }

        #anniu:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(36, 80, 167, 0.2);
        }

        /* 时间输入框样式 */
        .time-input-container {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .time-input {
            flex: 1;
        }

        .time-label {
            font-size: 0.9rem;
            color: #666;
            white-space: nowrap;
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(3px);
        }

        .modal-content {
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
            width: 400px;
            max-width: 90%;
            position: relative;
            transform: scale(0.9);
            opacity: 0;
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
        }

        .modal.active .modal-content {
            transform: scale(1);
            opacity: 1;
        }

        .modal-header {
            padding: 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 12px 12px 0 0;
            background: #f8f9fa;
        }

        .modal-title {
            font-size: 1.5rem;
            font-weight: bold;
            color: #183a8a;
        }

        .close-modal {
            font-size: 1.5rem;
            color: #aaa;
            cursor: pointer;
            transition: color 0.2s;
        }

        .close-modal:hover {
            color: #333;
        }

        .modal-body {
            padding: 40px 20px;
            text-align: center;
        }

        .success-icon {
            font-size: 64px;
            color: #4CAF50;
            margin-bottom: 20px;
            display: inline-block;
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
            }

            50% {
                transform: scale(1.1);
                box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
            }

            100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
            }
        }

        .success-message {
            font-size: 1.3rem;
            color: #333;
            font-weight: 500;
            margin-bottom: 15px;
        }

        .order-id {
            font-size: 1.5rem;
            color: #2450a7;
            font-weight: bold;
            background: #f0f4ff;
            padding: 10px 20px;
            border-radius: 8px;
            margin: 15px 0;
            border: 2px solid #e6f0ff;
        }

        .modal-footer {
            padding: 20px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: center;
            border-radius: 0 0 12px 12px;
        }

        .btn {
            padding: 12px 30px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 1rem;
            transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
        }

        .btn-primary {
            background-color: #2450a7;
            color: white;
            box-shadow: 0 4px 12px rgba(36, 80, 167, 0.2);
        }

        .btn-primary:hover {
            background-color: #1a4080;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(36, 80, 167, 0.3);
        }

        .btn-primary:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(36, 80, 167, 0.2);
        }

        /* 添加错误消息样式 */
        .error-alert {
            background-color: #ffebee;
            color: #d32f2f;
            padding: 15px;
            border-radius: 6px;
            margin-bottom: 20px;
            border-left: 4px solid #d32f2f;
            display: flex;
            align-items: center;
        }

        .error-alert-icon {
            margin-right: 10px;
            font-size: 20px;
        }

        /* 添加表单验证提示样式 */
        .validation-alert {
            background-color: #fff3e0;
            color: #e65100;
            padding: 15px;
            border-radius: 6px;
            margin-bottom: 20px;
            border-left: 4px solid #e65100;
            display: none;
        }

        .validation-alert.show {
            display: block;
        }

        @media (max-width: 900px) {
            .sidebar {
                width: 120px;
            }

            .menu-item {
                padding: 18px 0 18px 15px;
                text-align: center;
                font-size: 1rem;
            }

            .form-grid {
                grid-template-columns: 1fr;
            }

            .form-card {
                padding: 20px;
            }

            .main-content {
                padding: 15px;
            }
        }
    </style>
</head>

<body>
<div class="header">
    <div>欢迎登录公司用车管理系统（用车员工）</div>
    <div class="header-right">
        <div class="user-icon">👤</div>
        <div class="user-info">账号：<%= employee.getEmployeeID() %></div>
        <div class="bell-icon">🔔</div>
        <a href="${pageContext.request.contextPath}/LogoutServlet" class="logout">退出登录</a>
    </div>
</div>
<div class="container">
    <div class="sidebar">
        <a class="menu-item" href="shouye.jsp">系统首页</a>
        <a class="menu-item active" href="#">申请用车</a>
        <a class="menu-item" href="jindu.jsp">申请进度</a>
        <a class="menu-item" href="lishi.jsp">历史订单</a>
        <a class="menu-item" href="geren.jsp">个人中心</a>
    </div>
    <div class="main-content">
        <div class="form-card">
            <div class="form-title">用车申请表</div>

            <!-- 显示错误消息 -->
            <% if(request.getAttribute("errorMessage") != null) { %>
            <div class="error-alert">
                <span class="error-alert-icon">⚠️</span>
                <%= request.getAttribute("errorMessage") %>
            </div>
            <% } %>

            <!-- 表单验证提示 -->
            <div id="validationAlert" class="validation-alert">
                <span class="error-alert-icon">⚠️</span>
                <span id="validationMessage">请填写所有必填项</span>
            </div>

            <form id="applicationForm" method="post" action="${pageContext.request.contextPath}/ShenqingServlet" onsubmit="return validateForm()">
                <input type="hidden" name="action" value="submit">
                <!-- 隐藏字段：员工信息 -->
                <input type="hidden" name="employeeID" value="<%= employee.getEmployeeID() %>">
                <input type="hidden" name="employeeName" value="<%= employee.getEmployeeName() %>">
                <input type="hidden" name="employeePhone" value="<%= employee.getPhoneNumber() != null ? employee.getPhoneNumber() : "" %>">
                <input type="hidden" name="employeeEmail" value="<%= employee.getEmail() != null ? employee.getEmail() : "" %>">
                <input type="hidden" name="employeePosition" value="<%= employee.getPosition() != null ? employee.getPosition() : "" %>">

                <div class="form-grid">
                    <div class="form-group">
                        <label>申请车辆类型：</label>
                        <select id="vehicleType" name="vehicleType" required onchange="checkField(this)">
                            <option value="">请选择车辆类型</option>
                            <option value="五座轿车">五座轿车</option>
                            <option value="七座商务车">七座商务车</option>
                            <option value="小巴士">小巴士</option>
                            <option value="大巴士">大巴士</option>
                        </select>
                        <div class="error-message">请选择车辆类型</div>
                    </div>
                    <div class="form-group">
                        <label>用车日期：</label>
                        <input type="date" id="useDate" name="useDate" required onchange="checkDate(this); updateReturnDateMin()">
                        <div class="error-message">请选择用车日期</div>
                    </div>
                    <div class="form-group">
                        <label>用车时间：</label>
                        <input type="time" id="useTime" name="useTime" value="08:00">
                        <div class="error-message">请选择用车时间</div>
                    </div>
                    <div class="form-group">
                        <label>还车日期：</label>
                        <input type="date" id="returnDate" name="returnDate" required onchange="checkReturnDate()">
                        <div class="error-message">请��择还车日期</div>
                    </div>
                    <div class="form-group">
                        <label>还车时间：</label>
                        <input type="time" id="returnTime" name="returnTime" value="18:00">
                        <div class="error-message">请选择还车时间</div>
                    </div>
                    <div class="form-group">
                        <label>目的地信息：</label>
                        <textarea id="destination" name="destination" rows="4" placeholder="请填写目的地信息..." required onblur="checkField(this)"></textarea>
                        <div class="error-message">请填写目的地信息</div>
                    </div>
                    <div class="form-group">
                        <label>用车事由：</label>
                        <textarea id="reason" name="reason" rows="4" placeholder="请填写用车的具体事由..." required onblur="checkField(this)"></textarea>
                        <div class="error-message">请填写用车事由</div>
                    </div>
                    <div class="form-group">
                        <label>乘车人信息：</label>
                        <textarea id="passengers" name="passengers" rows="4" placeholder="请填写乘车人员姓名、部门等信息..." required onblur="checkField(this)"></textarea>
                        <div class="error-message">请填写乘车人信息</div>
                    </div>
                    <div class="form-group">
                        <label>备注：</label>
                        <textarea id="remarks" name="remarks" rows="4" placeholder="其他需要说明的事项..."></textarea>
                    </div>
                </div>
                <div class="form-actions">
                    <button type="submit" id="anniu">提交申请</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 成功提交的模态框 -->
<div id="successModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <div class="modal-title">申请提交成功</div>
            <span class="close-modal" onclick="closeModal()">&times;</span>
        </div>
        <div class="modal-body">
            <div class="success-icon">✓</div>
            <p class="success-message">您的用车申请已成功提交！</p>
            <div class="order-id">
                订单号：<span id="orderIdDisplay"></span>
            </div>
            <p style="color: #666; font-size: 0.9rem;">请记住您的订单号，以便查询申请进度</p>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" onclick="closeModal()">确定</button>
        </div>
    </div>
</div>

<script>
    // 设置最小日期为今天
    function setMinDates() {
        const today = new Date();
        const yyyy = today.getFullYear();
        const mm = String(today.getMonth() + 1).padStart(2, '0');
        const dd = String(today.getDate()).padStart(2, '0');
        const todayStr = `${yyyy}-${mm}-${dd}`;

        document.getElementById('useDate').min = todayStr;
        document.getElementById('returnDate').min = todayStr;

        // 设置默认值为今天
        document.getElementById('useDate').value = todayStr;
        document.getElementById('returnDate').value = todayStr;
    }

    // 检查单个字段是否为空
    function checkField(field) {
        if (!field.value.trim()) {
            field.parentElement.classList.add('error');
            return false;
        } else {
            field.parentElement.classList.remove('error');
            return true;
        }
    }

    // 检查日期是否早于当前日期
    function checkDate(dateField) {
        const today = new Date();
        today.setHours(0, 0, 0, 0);

        const selectedDate = new Date(dateField.value);
        selectedDate.setHours(0, 0, 0, 0);

        if (selectedDate < today) {
            dateField.parentElement.classList.add('error');
            dateField.parentElement.querySelector('.error-message').textContent = '日期不能早于今天';
            showValidationAlert('用车日期不能早于今天');
            return false;
        } else {
            dateField.parentElement.classList.remove('error');
            return true;
        }
    }

    // 更新还车日期的最小值
    function updateReturnDateMin() {
        const useDate = document.getElementById('useDate').value;
        if (useDate) {
            document.getElementById('returnDate').min = useDate;

            // 如果还车日期早于用车日期，则更新还车日期
            const returnDate = document.getElementById('returnDate').value;
            if (returnDate && new Date(returnDate) < new Date(useDate)) {
                document.getElementById('returnDate').value = useDate;
            }
        }
    }

    // 检查还车日期是否早于用车日期
    function checkReturnDate() {
        const useDate = document.getElementById('useDate').value;
        const returnDate = document.getElementById('returnDate').value;

        if (useDate && returnDate) {
            if (new Date(returnDate) < new Date(useDate)) {
                document.getElementById('returnDate').parentElement.classList.add('error');
                document.getElementById('returnDate').parentElement.querySelector('.error-message').textContent = '还车日期不能早于用车日期';
                showValidationAlert('还车日期不能早于用车日期');
                return false;
            } else {
                document.getElementById('returnDate').parentElement.classList.remove('error');
                return true;
            }
        }
        return true;
    }

    // 显示验证提示
    function showValidationAlert(message) {
        const alert = document.getElementById('validationAlert');
        document.getElementById('validationMessage').textContent = message;
        alert.classList.add('show');

        // 5秒后自动隐藏
        setTimeout(() => {
            alert.classList.remove('show');
        }, 5000);
    }

    // 页面加载时设置最小日期
    window.onload = function() {
        setMinDates();

        // 检查URL参数，如果有success=true和orderId，显示成功模态框
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.get('success') === 'true') {
            const orderId = urlParams.get('orderId');
            if (orderId) {
                document.getElementById('orderIdDisplay').textContent = orderId;
                showModal();
            }
        }
    };

    // 表单验证函数
    function validateForm() {
        let isValid = true;
        const vehicleType = document.getElementById('vehicleType').value;
        const useDate = document.getElementById('useDate').value;
        const returnDate = document.getElementById('returnDate').value;
        const destination = document.getElementById('destination').value;
        const reason = document.getElementById('reason').value;
        const passengers = document.getElementById('passengers').value;

        // 清除所有错误状态
        const formGroups = document.querySelectorAll('.form-group');
        formGroups.forEach(group => {
            group.classList.remove('error');
        });

        // 验证必填项
        if (!vehicleType) {
            document.getElementById('vehicleType').parentElement.classList.add('error');
            isValid = false;
            showValidationAlert('请选择车辆类型');
        }

        if (!useDate) {
            document.getElementById('useDate').parentElement.classList.add('error');
            isValid = false;
            showValidationAlert('请选择用车日期');
        } else if (!checkDate(document.getElementById('useDate'))) {
            isValid = false;
        }

        if (!returnDate) {
            document.getElementById('returnDate').parentElement.classList.add('error');
            isValid = false;
            showValidationAlert('请选择还车日期');
        } else if (!checkReturnDate()) {
            isValid = false;
        }

        if (!destination.trim()) {
            document.getElementById('destination').parentElement.classList.add('error');
            isValid = false;
            showValidationAlert('请填写目的地信息');
        }

        if (!reason.trim()) {
            document.getElementById('reason').parentElement.classList.add('error');
            isValid = false;
            showValidationAlert('请填写用车事由');
        }

        if (!passengers.trim()) {
            document.getElementById('passengers').parentElement.classList.add('error');
            isValid = false;
            showValidationAlert('请填写乘车人信息');
        }

        return isValid;
    }

    // 显示模态框
    function showModal() {
        const modal = document.getElementById('successModal');
        modal.style.display = 'flex';
        setTimeout(() => {
            modal.classList.add('active');
        }, 10);
    }

    // 关闭模态框
    function closeModal() {
        const modal = document.getElementById('successModal');
        modal.classList.remove('active');
        setTimeout(() => {
            modal.style.display = 'none';
            // 关闭模态框后跳转到申请进度页面
            window.location.href = 'jindu.jsp';
        }, 300);
    }
</script>

</body>
</html>
